<template>
  <div class="conte">
    <div class="ifn" v-if="listrecordcontent.length > 0">
      <div v-if="userIds != ownerIds">
        <ul class="title">
          <li class="nam">出价人</li>
          <li class="tim">出价时间</li>
          <li class="sum">出价金额</li>
        </ul>
        <div class="lisBox" v-for="(item) in listrecordcontent" :key="item.id" v-if="item.user_id != userId">
          <p class="nam">{{item.telphone}}</p>
          <p class="tim">{{item.create_time}}</p>
          <p class="sum">***</p>
        </div>
        <div v-else-if="item.user_id == userId && !isTr" class="myLisBox">
          <p class="nam">{{item.telphone}} <span>本人</span></p>
          <p class="tim">{{item.create_time}}</p>
          <p class="sum">{{item.amount}}元</p>
        </div>
        <div v-else class="HighestLisBox">
          <p class="nam">{{item.telphone}} <span>最高</span> <span style="color:#fdc125;border-color:#fdc125;">本人</span></p>
          <p class="tim">{{item.create_time}}</p>
          <p class="sum">{{item.amount}}元</p>
        </div>
      </div>
      <div v-if="userIds == ownerIds">
        <ul class="title">
          <li class="nam">出价人</li>
          <li class="tim">出价时间</li>
          <li class="sum">出价金额</li>
        </ul>
        <div v-for="(item) in listrecordcontent" :class="item.user_id == list.currentHighestUser ? HighestLisBox : lisBox" :key="item.id" v-if="item.user_id != userId">
          <p class="nam">{{item.telphone}} <span v-if="item.user_id == list.currentHighestUser">最高</span></p>
          <p class="tim">{{item.create_time}}</p>
          <p class="sum">{{item.amount}}元</p>
        </div>
      </div>
    </div>
    <div class="noRecord" v-else>
      <img src="../../../static/img/buyCar/details/buy_img_no_record.png" alt="">
      <p>暂无投标记录</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: {},
      userLis: '',
      buyCarParams: '',
      listrecordcontent: {},
      userIds: '',
      ownerIds: '',
      lisBox: 'lisBox',
      HighestLisBox: 'HighestLisBox'
    }
  },
  props: {
    carList1: {
      type: Object
    },
    userId: {
      type: String
    },
    isTr: {
      type: Boolean
    }
  },
  created () {
    this.buyCarParams = this.$route.query
    this.ownerIds = this.$route.query.owner_id
    this.getFinanceData()
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.userLis = jsonObj.data.data.user
      this.userIds = jsonObj.data.data.user.id
    }
  },
  methods: {
    getFinanceData () {
      this.buyCarParams = this.$route.query
      // window.scrollTo(0, 0)
      let status = ''
      if (this.carList1.bidSingle.status === '0' || this.carList1.bidSingle.status === '1' || this.carList1.bidSingle.status === '7' || this.carList1.bidSingle.status === '6') {
        status = '0'
      } else {
        status = '1'
      }
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/BidRecords?x=' + new Date().getTime(),
        params: {
          status: status,
          page: '1',
          rows: '100',
          carId: this.buyCarParams.id
        },
        headers: {'from': 'web'}
      }).then(r => {
        this.list = r.data.data
        let lis = r.data.data.record.content
        for (let i = 0; i < lis.length; i++) {
          lis[i].create_time = lis[i].create_time.substring(0, 4) + '.' + lis[i].create_time.substring(5, 7) + '.' + lis[i].create_time.substring(8, 10) + ' ' + lis[i].create_time.substring(11, 16)
        }
        this.listrecordcontent = lis
        // console.log(r)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.nam{
  width: 210px;
}
.tim{
  width: 720px;
}
.sum{
  width: 220px;
  margin-left: 50px;
}
.conte{
  padding-bottom: 50px;
  .noRecord{
    width: 143px;
    height: 180px;
    text-align: center;
    margin: 100px auto 30px;
    p{
      margin-top: 20px;
      width: 135px;
    }
  }
  .title{
    padding: 44px 0 20px 0;
    overflow: hidden;
    border-bottom: 1px dashed #e3e3e3;
    // dashed  dotted
    li{
      float: left;
      text-align: center;
    }
  }
  .lisBox{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed #e3e3e3;
    .tim{
        width: 675px;
    }
    .sum{
      margin-left: 60px;
    }
    .nam{
      width: 190px;
      text-align: left;
      padding-left: 55px;
      span:first-child{
        text-align: center;
        margin: 0 10px;
      }
      span{
        margin: 0;
        text-align: center;
      }
    }
    p{
      float: left;
      text-align: center;
      span{
        margin-left: 5px;
      }
    }
  }
  .myLisBox{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed #e3e3e3;
    .tim{
        width: 675px;
    }
    .sum{
      margin-left: 60px;
    }
    .nam{
      width: 190px;
      text-align: left;
      padding-left: 55px;
      span:first-child{
        text-align: center;
        margin: 0 10px;
      }
      span{
        margin: 0;
        text-align: center;
      }
    }
    p{
      color: #fdc125;
      float: left;
      text-align: center;
      span{
        display: inline-block;
        margin-left: 5px;
        width: 34px;
        height: 18px;
        line-height: 18px;
        border: 1px solid #fdc125;
        padding: 2px;
        border-radius: 5px;
      }
    }
  }
  .HighestLisBox{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed #e3e3e3;
    p{
      color: #ff6f3c;
      float: left;
      text-align: center;
      span{
        display: inline-block;
        margin-left: 4px;
        width: 34px;
        height: 18px;
        line-height: 18px;
        border: 1px solid #ff6f3c;
        padding: 2px;
        border-radius: 5px;
      }
    }
  }
}

</style>
